<template>
    <div class="container">
        <div class="title" @click="capture()">老赖作息时间表<el-button>一键截图</el-button></div>
        <div ref="dom">
            <CustomTable :tableData=tableData :row-style="cellStyle">
                <template #week='scope'>
                    {{ getWeek(scope.scope.row.date) }}
                </template>
                <template #type='scope'>
                    <span
                        :style="{ color: scope.scope.row.type == '休息' ? 'green' : scope.scope.row.type == '白班' ? 'orange' : 'red' }">{{
                            scope.scope.row.type }}</span>
                </template>
                <template #time='scope'>
                    <span v-if="scope.scope.row.type == '夜班'" style="color: red;">00:00-08:00</span>
                    <span v-if="scope.scope.row.type == '白班'" style="color: blue;">08:00-16:00</span>
                    <span v-if="scope.scope.row.type == '中班'" style="color: orange;">16:00-00:00</span>
                    <span v-if="scope.scope.row.type == '休息'" style="color: green;">休息</span>
                </template>
            </CustomTable>
        </div>
    </div>
</template>
<script setup lang = 'ts'>
import CustomTable from '@/components/customTable.vue'
import { captureDom } from '@/utils/capture_dom.ts'

const dom = ref<HTMLDivElement | null>(null)

const capture = () => {
    console.log(dom.value);

    captureDom(dom.value as HTMLDivElement, '老赖作息时间表')
}
interface typeData {
    column: ({
        id: number,
        name: string,
        prop: string,
        align: string,
        slotname?: string
    })[],
    data: ({
        id: number,
        date: string,
        type: string,
    })[],
    isTable: boolean,
}
const tableData: typeData = reactive({
    column: [
        { id: 1, name: '日期', prop: 'date', align: 'center' },
        { id: 2, name: '星期', prop: 'week', slotname:'week', align: 'center' },
        { id: 3, name: '班次', prop: 'type', slotname: 'type', align: 'center' },
        { id: 4, name: '时间', prop: 'time', slotname: 'time', align: 'center' },
    ], //表头
    data: [], //表格数据  
    isTable: true, // 是否开启表格
})
interface ScheduleItem {
    id: number;
    date: string;
    type: string;
}

const scheduleTypes = ['夜班', '夜班', '白班', '白班', '中班', '中班', '休息', '休息'];

function generateSchedule(startDate: Date, endDate: Date): ScheduleItem[] {
    const schedule: ScheduleItem[] = [];
    const currentDate = new Date(startDate);

    let id = 1;

    while (currentDate <= endDate) {
        const date = getFormattedDate(currentDate);
        const dayIndex = Math.floor(((currentDate as unknown as number) - (startDate as unknown as number)) / (24 * 60 * 60 * 1000)) % scheduleTypes.length;
        const type = scheduleTypes[dayIndex];

        schedule.push({ id, date, type });
        id++;

        currentDate.setDate(currentDate.getDate() + 1);
    }
    console.log(schedule);
    schedule.forEach((item) => {
        tableData.data.push(item)
    })
    return schedule;
}

function getFormattedDate(date: Date): string {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
}

const startDate = new Date('2023-08-31');
const endDate = new Date('2023-12-31');

const sift = () => {
    const d = new Date()
    const year = d.getFullYear()
    let mm = d.getMonth() + 1
    if (mm < 10) mm = `0${mm}` as unknown as number;
    const date = year + '-' + mm
    tableData.data = tableData.data.filter(item => item.date.includes(date) == true)
}

const getWeek = (day:string) => {
    // 创建一个日期对象，这里假设你已经有了一个日期对象
    const date = new Date(day); // 或者使用特定的日期：new Date('2023-08-29')

    // 获取日期对应的星期几
    const daysOfWeek = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
    const dayIndex = date.getDay();
    const dayOfWeek = daysOfWeek[dayIndex];
    return dayOfWeek
}

const cellStyle = (row: any) => {
    const d = new Date()
    const yy = d.getFullYear()
    let mm = d.getMonth() + 1
    let day = d.getDate()
    if (mm < 10) mm = `0${mm}` as unknown as number;
    if (day < 10) day = `0${day}` as unknown as number;
    const date = `${yy}-${mm}-${day}`
    if (row.row.date == date) {
        return {
            backgroundColor: "rgb(197, 213, 255) !important",
            color: "#28A458 !important",
            cursor: "pointer",
        };
    }
};
onMounted(() => {
    generateSchedule(startDate, endDate);
    sift()
})
</script>
<style scoped lang='less'>
.container {
    .title {
        font-size: 30px;
        font-weight: bold;
        margin-bottom: 20px;
        text-align: center;
    }
}
</style>